<style lang="scss" scoped>
.indent {
  background-color: #fff;
  width: 100%;
  .van-dropdown-menu {
    margin-bottom: 10px;
  }
}
</style>
<template>
  <div class="indent">
    <van-nav-bar title="订单记录" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon
          size="22px"
          color="#000"
          name="wap-home-o"
          @click="$router.push('/')"
        />
      </template>
    </van-nav-bar>
    <van-tabs v-model="activeName" sticky animated swipeable>
      <van-tab title="进行中" name="a">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            get-container="#app"
          />
        </van-dropdown-menu>
        <div v-if="value1 == 0" class="list_item">
          <OrderItem></OrderItem>
          <OrderItem></OrderItem>
          <OrderItem></OrderItem>
          <OrderItem></OrderItem>
          <OrderItem></OrderItem>
        </div>
        <div v-if="value1 == 1" class="list_item">
          <OrderItem></OrderItem>
          <OrderItem></OrderItem>
        </div>
      </van-tab>
      <van-tab title="已完成" name="b">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无完成订单"
        />
      </van-tab>
      <van-tab title="已取消" name="c">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无取消订单"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import OrderItem from "../components/OrderItem";
export default {
  components: { OrderItem },
  data: () => ({
    activeName: "a",
    value1: 0,
    option1: [
      { text: "即时", value: 0 },
      { text: "预约", value: 1 },
    ],
  }),
  methods: {
    // 弹框 选择模式
    onConfirm2(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
      this.columnsMsg = value;
    },
    onCancel() {
      console.log("取消");
    },
    onClickLeft() {
      console.log("left");
      this.$router.go(-1);
    },
  },
};
</script>